<template>
    <div class="pc register">
        <h3 class="title">注册</h3>
        <h4 class="sub-title">欢迎来到智慧现场管理系统</h4>
        <el-form :model="form" @submit.native.prevent="onSubmit('register-form')" :rules="rules" class="register-form" ref="register-form">
            <el-form-item prop="username">
                <el-input placeholder="请输入账户名" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入手机号码">
                    <span slot="suffix" class="get-code" @click="getCode('register-form')">{{get_code_content}}</span>
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input v-model="form.code" placeholder="请输入短信验证码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input :disabled="!agree" type="submit" class="login-button" value="注册" @click="onSubmit('register-form')"></el-input>
            </el-form-item>
        </el-form>
        <div class="others agree">
            <div class="agree-register">
                <el-checkbox v-model="agree">同意
                    <router-link to="/protocal" target="_blank" class="href">《墨点狗用户注册协议》</router-link>
                </el-checkbox>
            </div>
            <div>已有账号?
                <router-link to="/login" class="href">登录</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import register from "@/api/register.js";
import code from "@/api/code.js";
import user from "@/api/user.js";
import login from "@/api/login.js";
import { validPhone } from '@/tool/validate.js';

let HOME_PAGE_URL = process.env.HOME_PAGE_URL;

export default {
    name: "register",
    data() {
        return {
            form: {
                username: "",
                password: "",
                name: "",
                mobile: "",
                code: "",
                UnionId: ""
            },
            rules: {
                username: [
                    {
                        required: false,
                        message: "请输入账户名"
                    }
                ],
                password: [
                    {
                        required: false,
                        message: "请输入密码"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur"
                    }
                ],
                mobile: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: validPhone
                    }
                ],
                code: [
                    {
                        required: true,
                        message: "请输入短信验证码",
                        trigger: "blur"
                    }
                ]
            },
            agree: false,
            count: 60,
            get_code_content: "获取短信验证码"
        };
    },
    methods: {
        getCode(formName) {
            if (this.count !== 60) return;
            this.$refs[formName].validateField("mobile", str => {
                if (str === "") {
                    code.getCode({ mobile: this.form.mobile });
                    this.setTime();
                }
            });
        },
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    register
                        .registerUser(this.form)
                        .then(res => {
                            this.$message({
                                type: "success",
                                message: "注册成功!"
                            });
                            window.location.href = HOME_PAGE_URL;
                        })
                        .catch(err => {
                            this.$message.error(err);
                        });
                } else {
                    return false;
                }
            });
        },
        setTime() {
            if (this.count === 0) {
                this.get_code_content = "获取短信验证码";
                this.count = 60;
                return false;
            } else {
                this.get_code_content = this.count + "s";
                this.count--;
            }
            setTimeout(() => {
                this.setTime();
            }, 1000);
        }
    },
    async mounted() {
        let code = window.location.href.split("code=")[1];
        code = code.split("&state=")[0];
        await user.wxLogin({ params: { code: code } }).then(res => {
            this.form.UnionId = res.data.data.unionid;
        });
    }
};
</script>

<style>
.register {
    margin-top: 21%;
}
.register-form {
    margin-top: 40px;
}
.agree-register .el-checkbox__label {
    font-size: 12px;
}
</style>
